<template>
  <div id="tool-wrapper" :style="{ right: isManage ? '1%' : '30%' }">
    <div class="tool-item" v-for="(item, index) in tools" :title="item.title">
      <a-popover
        v-if="item.title === '图层控制'"
        placement="leftBottom"
        trigger="click"
      >
        <template #content>
          <div class="item-wrapper">
            <div class="item">
              <div
                class="box"
                :style="{ borderColor: 'gray',backgroundColor: allSelected ? 'white' : 'transparent', }"
                @click="controlAll"
              >
                <!-- <img src="../assets/对号.svg" alt="对勾" class="duihao" /> -->
              </div>
              <span :style="{ color: '#34c5cf' }">全选</span>
            </div>
            <div class="item" v-for="item in lineArr">
              <div
                class="box"
                :style="{
                  borderColor: item.color,
                  backgroundColor: item.checked ? item.color : 'transparent',
                }"
                @click="chooseLine(item)"
              ></div>
              <span :style="{ color: '#34c5cf' }">{{
                item.name.slice(-3)
              }}</span>
            </div>
          </div>
        </template>
        <i
          :class="['iconfont', item.icon, disabled ? 'disabled-icon' : '']"
        ></i>
      </a-popover>
      <i :class="['iconfont', item.icon]" v-else-if="index !== 2" @click="flyToDefaultView(tempViewer)"></i>
      <i :class="['iconfont', item.icon]" @click="toggleFullScreen" v-else></i> <!-- 使用 testClick 方法 -->
    </div>
  </div>
</template>

<script setup>
import { useLineData } from '@/store/index';
import toolList from '@/store/toolList';
import {
  renderAll,
  renderStationBill,
  displayByName,
  changeDisplayBillBoard,
} from '../cesiumTools/material/effectController.js';
import { ref, toRefs, onMounted } from 'vue';
import { watchLineData } from '../store/index.js';
import {flyToDefaultView} from '../cesiumTools/sceneManager.js'
const allSelected = ref(true);
const tools = ref(toolList);
const tempViewer=ref(null)
const disabled = ref(false);
const isManage = ref(false);
const lineArr = ref([]);


// 切换全屏
  const toggleFullScreen = () => {
  const elem = document.documentElement;
  if (!document.fullscreenElement) {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) { // Firefox
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { // Chrome, Safari, and Opera
      elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { // IE/Edge
      elem.msRequestFullscreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { // Firefox
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { // Chrome, Safari, and Opera
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { // IE/Edge
      document.msExitFullscreen();
    }
  }
};

// 全选
const controlAll = () => {
  allSelected.value = !allSelected.value;
  const checked = lineArr.value.every((item) => item.checked);
  console.log(checked);
  const lineNames = lineArr.value.map((item) => item.name);
  const stationNames = [];
  lineArr.value.forEach((item) => {
    const { stationsList } = item;
    stationsList.forEach((station) => {
      stationNames.push(station.name);
    });
  });
  // 控制地图元素显示隐藏
  displayByName(lineNames, stationNames, !checked);
  console.log(stationNames)
  changeDisplayBillBoard(stationNames, !checked);
  // changeDisplayBillBoard(stationNames, !checked);
  lineArr.value.forEach((item) => {
    item.checked = !checked;
  });
};

// 单选
const chooseLine = (item) => {
  item.checked = !item.checked
  const names = [item.name]
  const stationNames = item.stationsList.map((station) => station.name)
  // 控制地图元素显示隐藏
  displayByName(names, stationNames, item.checked)
  changeDisplayBillBoard(stationNames, item.checked)
  // 检查是否全部选中
  allSelected.value = lineArr.value.every((line) => line.checked)
};




onMounted(async () => {
  const viewer = await watchLineData('setViewer');
  tempViewer.value=viewer
  const cameraInfo={
        position:viewer.camera.position,
        heading:viewer.camera.heading,
        pitch:viewer.camera.pitch,
        roll:viewer.camera.roll
    }
    window.localStorage.setItem('cameraInfo',JSON.stringify(cameraInfo))
  const lineData = await watchLineData('setData');

  console.log(lineData);
  lineArr.value = lineData;
  renderAll(viewer, lineData);
  lineData.forEach((item) => {
    item.stationsList.forEach((station) => {
      station.color = item.color;
    });
  });
  const newData = lineData.map((item) => item.stationsList).flat();
  console.log(newData);
  newData.forEach((station) => {
    const options = {
      positions: station.position,
      name: station.name,
      peopleFlow: station.peopleFlow,
      isChange: station.isChange,
      show: true,
      color: station.color,
      attr: {
        description: `人流量: ${station.peopleFlow}, 是否换乘: ${
          station.isChange === 1 ? '是' : '否'
        }`,
        id: station.name,
      },
    };
    renderStationBill(viewer, options);
  });
});
</script>

<style scoped>
#tool-wrapper {
  position: absolute;
  right: 30%;
  bottom: 10%;
  display: flex;
  flex-direction: column;
  z-index: 199;
}

.tool-item {
  margin: 4px;
  pointer-events: all;
  cursor: pointer;
}

.tool-item:hover {
  background-color: #d8951a7f;
}

#tool-wrapper i {
  color: #ffd31a;
  border: 1px solid #d8951a;
  padding: 3px;
}

#tool-wrapper span {
  color: #fff;
}

.disabled-icon {
  pointer-events: none;
  cursor: none;
  background-color: rgba(204, 204, 204, 0.306);
}

.disabled-icon:hover {
  cursor: none;
}

.box {
  width: 10px;
  height: 10px;
  border-width: 1px;
  border-style: solid;
  background: transparent;
  user-select: all;
  cursor: pointer;
}

.duihao {
  position: absolute;
  top: 15px;
  left: 14px;
  width: 10px;
  height: 10px;
}

.item {
  width: 65px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid #885f12;
  color: #fff;
  font-size: 10px;
  pointer-events: all;
  cursor: pointer;
}

.item:hover {
  border: 1px solid #d8961a;
}

.item > span {
  line-height: 9.005px;
}

.item > input {
  outline: none;
  border: none;
  transition: all 0.3s ease;
}

.item-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: space-around;
  flex-wrap: wrap;
  flex: 1;
  background-color: rgba(0, 0, 0, 0.3);
}
</style>